{% extends "page/index.html" %}

{% block css %}
    <link type="text/css" rel="stylesheet" media="all" href="/medias/css/map.css" />
{% endblock %}

{% block jscript %}
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;hl=fr&amp;key={{ GOOGLE_ID }}"></script>
<script src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/map/mapiconmaker.js"></script>

<script type="text/javascript">
  var map;
  
  function initializeGoogleMap() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setMapType(G_HYBRID_MAP);
  
      var customUI = map.getDefaultUI();
      customUI.controls.scalecontrol = false;   //Echelle de la carte
      customUI.controls.menumaptypecontrol = false; //Ligne type de carte en haut de la carte
      customUI.zoom.scrollwheel = false;
			
      map.setUI(customUI);

      map.disableDoubleClickZoom();
      map.disableScrollWheelZoom();

      map.setCenter(new GLatLng({{ maps.0.map_lat }}, {{ maps.0.map_lon }}), 17);
      // Create our "tiny" marker icon
      var tinyIcon = new GIcon();
      tinyIcon.image = "{{ MEDIA_URL }}images/map/mm_20_red.png";
      tinyIcon.shadow = "{{ MEDIA_URL }}images/map/mm_20_shadow.png";
      tinyIcon.iconSize = new GSize(12, 20);
      tinyIcon.shadowSize = new GSize(22, 20);
      tinyIcon.iconAnchor = new GPoint(6, 20);
      tinyIcon.infoWindowAnchor = new GPoint(5, 1);
      // Set up our GMarkerOptions object literal
      markerOptions = { icon:tinyIcon };

      {% for map in maps %}
      var newIcon = MapIconMaker.createLabeledMarkerIcon({addStar: false, label: '{{ forloop.counter }}', primaryColor: "#FF796D"});
      var point = new GLatLng({{map.map_lat}},{{map.map_lon}});
      var tmp = new GMarker(point, {icon: newIcon});
      map.addOverlay(tmp);
      {% endfor %}
    }
}

function agrandirCarte(){
    if($("#map_canvas").height() != 500)
    {
	$("#map_canvas").animate({height: "500px"}, 
                                 500, "linear",
                                 function(){initializeGoogleMap();});
    }
    else
    {
	$("#map_canvas").animate({height: "240px"}, 
                                 500, "linear",
                                 function(){initializeGoogleMap();});			
    }
}

function move(x, y){
    try{
    	map.panTo(new GLatLng(x, y));
    }catch(err){

    }
}
</script>
{% endblock %}

{% block content %}
  {{block.super}}

  <p id="scenes"><a href="" onClick="agrandirCarte(); return false;">Agrandir / Réduire la carte</a></p>

  <div id="map_canvas"></div>

  <dl id="map">
    {% for map in maps %}
    <dt>{{ forloop.counter }} - <a href="#scenes" onclick="move({{ map.map_lat }},{{ map.map_lon }});"><strong>{{map.name}}</strong></a></dt>
    <dd><em>{{map.comment}}</em></dd>
    {% endfor %}
  </dl>

<script type="text/javascript">initializeGoogleMap()</script>
{% endblock %}

{% block admin %}
    <a href="/admin/map/map/">Administration</a>
{% endblock %}
